<template>
  <div class="index">
    <div class="top">
      <div><van-icon name="certificate" /> <span>100%正品保证</span></div>
      <div><van-icon name="certificate" /> <span>所有商品精挑细选</span></div>
      <div><van-icon name="certificate" /> <span>售后无忧</span></div>
    </div>

    <div class="count">
      <span>
        商品数量:<span>{{ count }}</span>
      </span>

      <button @click="showBtn" v-if="show">管理</button>
      <button @click="showBtn" v-if="show == false">取消</button>
    </div>

    <ul v-if="list.length > 0">
      <van-checkbox-group
        v-model="result"
        ref="checkboxGroup"
        @click="checkAll"
        @change="aa"
      >
        <li v-for="i in list" :key="i.id" class="li">
          <van-checkbox :name="i.id" @click="xuan(i)">
            <div class="box">
              <div class="img">
                <van-image fit="cover" :src="i.productInfo.image" />
              </div>
              <div class="right">
                <p class="title">{{ i.productInfo.store_name }}</p>
                <p class="attr">属性:{{ i.productInfo.attrInfo.suk }}</p>
                <div class="pri">
                  <span>￥{{ i.productInfo.price }}</span>
                  <i>X{{ i.cart_num }}</i>
                </div>
              </div>
              <div class="del" @click.stop="del(i)" v-if="show == false">
                删除
              </div>
            </div>
          </van-checkbox>
        </li>
      </van-checkbox-group>
    </ul>

    <div v-if="list.length == 0">
      <van-image src="http://47.115.51.185/h5/img/noCart.6f2abfef.png" alt="" />
    </div>

    <van-submit-bar
      :price="pri * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="changeC">全选</van-checkbox>
    </van-submit-bar>

    <ButtomTab></ButtomTab>
  </div>
</template>

<script>
import ButtomTab from "@/components/ButtomTab";
import { Toast } from "vant";

export default {
  name: "Cart",
  data() {
    return {
      count: 0,
      show: true,
      list: [],
      checked: false,
      result: [],
      pri: 0
    };
  },
  created() {
    this.$axios.get("api/cart/list").then(d => {
      console.log(d);
      this.list = d.data.data.valid;
    });
    this.$axios.get("api/cart/count").then(d => {
      console.log(d);
      this.count = d.data.data.count;
    });
  },
  components: {
    ButtomTab
  },
  computed: {},
  methods: {
    del(i) {
      this.$axios({
        method: "post",
        url: "api/cart/del",
        data: {
          ids: [i.id]
        }
      }).then(d => {
        console.log(d);
      });

      this.list.forEach((v, idx) => {
        if (i.product_attr_unique == v.product_attr_unique) {
          this.list.splice(idx, 1);
        }
      });
      this.pri = 0;
      this.list.forEach(v => {
        this.result.forEach(a => {
          if (a == v.id) {
            this.pri += v.truePrice * v.cart_num;
          }
        });
      });

      if (this.list.length == 0) {
        this.checked = false;
        this.show = false;
        this.count = 0;
      }

      Toast.success("删除成功");
    },
    aa(e) {
      //复选框发生改变
      console.log(this.result);
      this.pri = 0;
      this.list.forEach(v => {
        e.forEach(a => {
          if (a == v.id) {
            this.pri += v.truePrice * v.cart_num;
          }
        });
      });
    },
    xuan() {
      if (this.result.length == this.list.length) {
        this.checked = true;
        this.pri = 0;
        this.list.forEach(d => {
          this.pri += d.truePrice * d.cart_num;
        });
      } else {
        this.checked = false;
      }
    },
    checkAll() {
      if (this.list.length != 0) {
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },
    toggleAll() {
      if (this.list.length != 0) {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    changeC() {
      if (this.checked) {
        this.checkAll();
        this.pri = 0;
        this.list.forEach(d => {
          this.pri += d.truePrice * d.cart_num;
        });
      } else {
        this.toggleAll();
        this.pri = 0;
      }
    },
    onSubmit() {
      //提交订单
      if (this.result.length > 0) {
        this.$router.push({
          path: "/order/submit/" + this.result.join()
        });
      } else {
        Toast.fail("没有选定商品");
      }
    },
    showBtn() {
      this.show = !this.show;
    }
  }
};
</script>
<style scoped lang="less">
.del {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid black;
  padding: 2px;
  z-index: 100;
}
ul {
  li {
    padding: 0 20px;
    margin: 20px 0;
    background: white;
    .van-checkbox {
      height: 2.5rem;
      width: 100%;
      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        .img {
          width: 2rem;
          height: 2rem;
          margin-right: 0.2rem;
          .van-image {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          flex: 1;
          width: 100%;
          height: 2rem;
          .title {
            text-align: left;
            font-size: 0.35rem;
            font-weight: bold;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          .attr {
            text-align: left;
            margin: 0.2rem 0;
            font-size: 0.3rem;
            color: rgb(61, 61, 61);
          }
          .pri {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 0.4rem;
              font-weight: bold;
              margin-right: 1rem;
            }
            .van-cell {
              width: auto;
              padding: 0;
            }
          }
        }
      }
      span.van-checkbox__label {
        display: block;
      }
    }
  }
}
.van-submit-bar {
  margin-bottom: 1.5rem;
}
.count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 1rem;
  font-size: 0.35rem;
  background: white;
  span {
    span {
      color: rgb(235, 66, 66);
    }
  }
  button {
    width: 1.2rem;
    height: 0.6rem;
  }
}
.top {
  font-size: 0.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    line-height: 1rem;
    span {
      vertical-align: middle;
    }
    .van-icon {
      vertical-align: middle;
    }
  }
}
</style>
